<template>
  <view id="app">
    <!-- 应用内容 -->
    <view class="app-container">
      <!-- uni-app会自动处理页面路由 -->
    </view>

    <!-- 全局加载提示 -->
    <view v-if="globalLoading" class="global-loading">
      <view class="loading-spinner"></view>
      <text class="loading-text">{{ loadingText }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      globalLoading: false,
      loadingText: "加载中...",
    };
  },
  onLaunch: function () {
    console.log("App Launch");

    // 检查平台
    // #ifdef MP-WEIXIN
    console.log("微信小程序环境");
    // #endif

    // #ifdef H5
    console.log("H5环境");
    // #endif

    // #ifdef APP-PLUS
    console.log("APP环境");
    // #endif
  },
  onShow: function () {
    console.log("App Show");
  },
  onHide: function () {
    console.log("App Hide");
  },
  onError: function (err) {
    console.error("App Error:", err);
  },
  onUnhandledRejection: function (res) {
    console.error("App Unhandled Rejection:", res);
  }
};
</script>

<style lang="scss">
/* 全局样式 */
page {
  background-color: #f8f8f8;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial,
    sans-serif;
}

#app {
  width: 100%;
  height: 100%;
}

.app-container {
  width: 100%;
  height: 100%;
}

/* 全局加载样式 */
.global-loading {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.loading-spinner {
  width: 60rpx;
  height: 60rpx;
  border: 4rpx solid rgba(255, 255, 255, 0.3);
  border-top: 4rpx solid white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 20rpx;
}

.loading-text {
  color: white;
  font-size: 28rpx;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 通用样式类 */
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

/* 按钮样式 */
.btn {
  border: none;
  border-radius: 25rpx;
  padding: 20rpx 30rpx;
  font-size: 28rpx;
  transition: all 0.3s ease;
  cursor: pointer;

  &:hover {
    transform: translateY(-2rpx);
  }

  &:active {
    transform: scale(0.98);
  }
}

.btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: 1rpx solid rgba(255, 255, 255, 0.3);
}

.btn-success {
  background: #4caf50;
  color: white;
}

.btn-danger {
  background: #f44336;
  color: white;
}

/* 卡片样式 */
.card {
  background: white;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
  margin-bottom: 20rpx;
}

/* 输入框样式 */
.input {
  width: 100%;
  height: 80rpx;
  background: #f8f9fa;
  border: 2rpx solid transparent;
  border-radius: 20rpx;
  padding: 0 30rpx;
  font-size: 28rpx;
  transition: all 0.3s ease;

  &:focus {
    border-color: #667eea;
    background: white;
    box-shadow: 0 0 0 4rpx rgba(102, 126, 234, 0.1);
  }

  &::placeholder {
    color: #999;
  }
}

/* 动画类 */
.fade-in {
  animation: fadeIn 0.3s ease;
}

.slide-up {
  animation: slideUp 0.3s ease;
}

.scale-in {
  animation: scaleIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(30rpx);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes scaleIn {
  from {
    transform: scale(0.9);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* 响应式工具类 */
.hidden-xs {
  /* #ifdef H5 */
  @media (max-width: 480px) {
    display: none !important;
  }
  /* #endif */
}

.hidden-sm {
  /* #ifdef H5 */
  @media (max-width: 768px) {
    display: none !important;
  }
  /* #endif */
}

.hidden-md {
  /* #ifdef H5 */
  @media (max-width: 1024px) {
    display: none !important;
  }
  /* #endif */
}

/* 平台特定样式 */
/* #ifdef MP-WEIXIN */
.wx-safe-area {
  padding-bottom: env(safe-area-inset-bottom);
}
/* #endif */

/* #ifdef APP-PLUS */
.app-safe-area {
  padding-top: var(--status-bar-height);
}
/* #endif */

/* #ifdef H5 */
.h5-container {
  min-height: 100vh;
}
/* #endif */
</style>
